<template>
  <div class="vip_mian">
    <Breadcrumb></Breadcrumb>
    <el-col :span="10" class="vip_main">
      <el-form ref="form" :model="data" label-width="80px">
        <el-form-item label="用户ID">
          <el-input v-model="data._id"></el-input>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="data.date"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即续费</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>
// 引入面包屑
import Breadcrumb from "@/commponents/common/Breadcrumb.vue";
export default {
  components: {
    Breadcrumb,
  },
  data() {
    return {
      data: {
        _id: "",
        date: "",
      },
    };
  },
  methods: {
    // 新增会员
    async onSubmit() {
      const data = await this.$api.member.vip({
        _id: this.data._id,
        date: this.data.date,
      });
      console.log(data);
      if (data.data.meta.status == 200) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error("操作失败");
      }
    },
  },
};
</script>

<style>
.vip_main {
  margin-top: 20px;
}
</style>
